<template>
  <div class="comment-drawer-demo q-py-md q-px-lg">
    <h2>t-comment demo</h2>
    <section>
      <div class="q-pa-md" style="max-width: 400px">
        <t-form
          ref="formRef"
          @submit="onClickComment"
          class="q-gutter-md"
        >
          <t-input
            v-if="false"
            filled
            v-model="form.pageId"
            label="Page Id"
            lazy-rules
            :rules="[val => (val && val.length > 0) || '请输入 pageId']"
          />

          <t-input
            v-if="false"
            filled
            v-model="form.dataId"
            label="dataId"
            lazy-rules
            :rules="[val => (val !== null && val !== '') || '请输入 dataId']"
          />

          <t-input
            filled
            v-model="form.commentTitle"
            label="Comment Title"
          />

          <div class="row content-end">
            <t-button label="评论" type="submit" color="primary" />
          </div>
        </t-form>
      </div>
    </section>

    <CommentDrawer v-model:visible="drawerVisible" :comment-options="form" />
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import CommentDrawer from './comment-drawer.vue';

export default {
  components: { CommentDrawer },
  setup() {
    const drawerVisible = ref(false);
    const genFormModel = () => {
      return {
        pageId: '',
        dataId: '',
        commentTitle: '',
      };
    };
    const formRef = ref();
    const form = ref(genFormModel());

    async function onClickComment() {
      const valid = await formRef.value.validate();
      drawerVisible.value = valid;
    }

    onMounted(() => {
      Object.assign(form.value, {
        dataId: 'comment-demo-data-id-001',
        pageId: 'comment-demo-page-id-001',
        commentTitle: '评论功能测试用-001',
      });
    });

    return {
      form,
      formRef,
      drawerVisible,

      onClickComment,
    };
  },
};
</script>

<style></style>
